<template>
  <view class="w-100 bottom-index min-h-100" :class="noticeType == 0?'':'bac-col-fa'" style="background: #fff;">
    <!-- 加载中蒙版 -->
    <!--    <qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>-->
    <!-- #ifdef MP-WEIXIN -->
    <!-- 顶部导航 - 微信小程序 -->
    <view
        :style="{position:'sticky',height:menuObject.height + menuObject.top +8 + 'px',width:'100%',zIndex:'2',top:0}"
        class="w-100 bac-col-00b">
      <view style="position: sticky;z-index: 2;"
            :style="{top:menuObject.top + 'px',height:menuObject.height + 'px',lineHeight:menuObject.height+'px'}">
        <view class="flex-dir-row fs-32 pos-abso flex-x-bet fw-600 centered col-f">
          <view>通知消息</view>
        </view>
      </view>
    </view>
    <!-- #endif -->

    <!-- #ifndef MP-WEIXIN -->
    <!-- 顶部导航 - App端 -->
    <view class="app-header">
      <!-- 状态栏占位 -->
      <view class="status-bar" :style="{ height: menuObject.statusBarHeight + 'px' }"></view>
      <view class="app-header-content">
        <view class="app-header-title">通知消息</view>
      </view>
    </view>
    <!-- #endif -->
    <view class="flex-dir-row flex-x-spa w-100 ping-30">
      <view class=" text-ali-c" @click="noticeTypeClick(3)">
        <view class="bac-col-68 ping-20 br-30 private-box pos-rela"
              :style="{background:noticeType == 3?'#ffe6f0':'',boxShadow:noticeType == 3?'0rpx 0rpx 15rpx 0rpx #f0c2d4':''}">
          <image class="w-100 h-100"
                 src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/xttz.png">
          </image>
          <!-- 大于9条未读显示... -->
          <view v-if="privateMessageCount <= 100 && privateMessageCount > 0" class="num-box">
            {{ privateMessageCount }}
          </view>
          <view v-else-if="privateMessageCount > 100" class="num-box">
            <view class="iconfont ic-dian"></view>
          </view>
        </view>
        <view class="fs-26 fw-600 mt-20">私信</view>
      </view>
      <view class=" text-ali-c" @click="noticeTypeClick(0)">
        <view class="bac-col-68 ping-20 br-30 circle-box pos-rela"
              :style="{background:noticeType == 0?'#cbfaff':'',boxShadow:noticeType == 0?'0rpx 0rpx 15rpx 0rpx #b1dbde':''}">
          <image class="w-100 h-100"
                 src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/qztz.png">
          </image>
          <!-- 大于9条未读显示... -->
          <view v-if="circleNoticeCount <= 100 && circleNoticeCount > 0" class="num-box">
            {{ circleNoticeCount }}
          </view>
          <view v-else-if="circleNoticeCount > 100" class="num-box">
            <view class="iconfont ic-dian"></view>
          </view>
        </view>
        <view class="fs-26 fw-600 mt-20">圈子消息</view>
      </view>
      <view class=" text-ali-c" @click="noticeTypeClick(1)">
        <view class="bac-col-68 ping-20 br-30 activity-box pos-rela"
              :style="{background:noticeType == 1?'#dbffd9':'',boxShadow:noticeType == 1?'0rpx 0rpx 15rpx 0rpx #c3e1c1':''}">
          <image class="w-100 h-100"
                 src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/hdtz.png">
          </image>
          <!-- 大于9条未读显示... -->
          <view v-if="activityNoticeCount <= 100 && activityNoticeCount > 0" class="num-box">
            {{ activityNoticeCount }}
          </view>
          <view v-else-if="activityNoticeCount > 100" class="num-box">
            <view class="iconfont ic-dian"></view>
          </view>
        </view>
        <view class="fs-26 fw-600 mt-20">活动通知</view>
      </view>
      <view class=" text-ali-c" @click="noticeTypeClick(2)">
        <view class="bac-col-68 ping-20 br-30 system-box pos-rela"
              :style="{background:noticeType == 2?'#fff2d2':'',boxShadow:noticeType == 2?'0rpx 0rpx 15rpx 0rpx #e3d7bb':''}">
          <image class="w-100 h-100"
                 src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/hdtz.png">
          </image>
          <!-- 大于9条未读显示... -->
          <view v-if="systemNoticeCount <= 100 && systemNoticeCount > 0" class="num-box">{{ systemNoticeCount }}
          </view>
          <view v-else-if="systemNoticeCount > 100" class="num-box">
            <view class="iconfont ic-dian"></view>
          </view>
        </view>
        <view class="fs-26 fw-600 mt-20">系统通知</view>
      </view>
    </view>

    <!-- 圈子消息 -->
    <view v-if="noticeType === 0">
      <!-- 如果消息列表为空 -->
      <view v-if="noticeList.length === 0" class="message-empty-box">
        <image class="message-empty-image"
               src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/message-empty.png"
               mode="scaleToFill"/>
        <view class="fs-28 fw-600">暂无消息</view>
      </view>
      <view v-else class="w-100 ping-30">
        <view class="flex-dir-row ali-item-sta flex-x-bet mb-50" v-for="item in noticeList" :key="item.id">
          <view class="flex-dir-row ali-item-sta">
            <view class="pos-rela" @click="$NavigateTo(`/qmy_user/user/myPage?usid=${item.user_id}`)">
              <qmy-gender-border iconBottom="4rpx" :gender="item.user_gender"
                                 :avatar="item.user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
                                 :avatarWidth="90 + 'rpx'" :avatarHeight="90 + 'rpx'"></qmy-gender-border>
              <view v-if="!item.like_read_status" style="height: 15rpx;width: 15rpx;top: 0;right: 0;"
                    class="br-200 bac-col-ff0 pos-abso"></view>
            </view>
            <view
                @click="item.like_data?'':$NavigateTo(`/pages/detail/articleDetail?id=${item.article_id || item.comment_content.article_id || item.comment_data.article_id || item.comment_content.article_id || item.article_data.id}&commentId=${item._id}`)"
                class="ml-20">
              <view class="flex-dir-col flex-x-bet h-90 text-box">
                <view class="fs-30 fw-600">{{ item.user_name || '匿名用户' }}</view>
                <view class="fs-26 col-87">
                  <text>
                    {{
                      (item.article_data && item.type === 0)
                          ? '赞了圈子'
                          : (item.article_data && item.comment_type === 0)
                              ? '评论了圈子'
                              : (item.like_data && item.like_data.comment_type === 0)
                                  ? '赞了你的评论'
                                  : (item.comment_data)
                                      ? '回复了你的评论'
                                      : (item.like_data && item.like_data.comment_type === 1)
                                          ? '赞了你的回复'
                                          : '未知状态'
                    }}
                  </text>

                  <text class="ml-10">{{ $timeFormat(item.create_date) }}</text>
                </view>
              </view>
              <view class="flex-dir-row mt-10 ali-item-cen" style="align-items: stretch;">
                <view class="flex-shrink-0 line-box"></view>
                <view class="fs-26 col-87 ml-10 mb-5">
                  <text>
                    {{
                      (item.comment_content) ||
                      (item.article_data && item.article_data.title) ||
                      (item.like_data && item.like_data.comment_content) ||
                      (item.comment_data && item.comment_data.comment_content) ||
                      '未知内容'
                    }}
                  </text>
                </view>
              </view>
            </view>
          </view>
          <image mode="aspectFill"
                 @click="$NavigateTo(`/pages/detail/articleDetail?id=${item.article_id || item.comment_content.article_id || item.comment_data.article_id || item.comment_content.article_id || item.article_data.id}`)"
                 v-if="item.type == 0 || (item.comment_content && item.comment_type == 0) "
                 class="br-10 wh-90 flex-shrink-0" :src="item.article_data.thumbnail[0]">
          </image>
        </view>
        <qmy-logo></qmy-logo>
      </view>
    </view>

    <!-- 活动通知 -->
    <view v-else-if="noticeType === 1">
      <!-- 如果消息列表为空 -->
      <view v-if="activityNoticeList.length === 0" class="message-empty-box">
        <image class="message-empty-image"
               src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/message-empty.png"
               mode="scaleToFill"/>
        <view class="fs-28 fw-600">暂无消息</view>
      </view>
      <!-- 消息列表 -->
      <view v-else class="ping-30 w-100">
        <!-- 活动消息 -->
        <view class="w-100">
          <view class="bac-col-f br-20 mb-30" v-for="(item,index) in activityNoticeList" :key="index">
            <view @click="$NavigateTo(`/qmy_user/user/myPage?usid=${item.activity_info.user_id}`)"
                  class="flex-dir-row ali-item-cen flex-x-bet ping-20">
              <view class="flex-dir-row ali-item-cen">
                <view class="activity-message-avatar pos-rela">
                  <qmy-gender-border :gender="item.activity_info.publisher_gender" iconWidth="24rpx"
                                     iconHeight="24rpx" iconSize="18rpx" iconLineHeight="24rpx"
                                     :avatar="item.activity_info.publisher_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
                                     :avatarWidth="65 + 'rpx'" :avatarHeight="65 + 'rpx'"></qmy-gender-border>
                  <view v-if="!item.user_read_status_array.includes('currentUser')"
                        style="height: 15rpx;width: 15rpx;top: 0;right: 0;"
                        class="br-200 bac-col-ff0 pos-abso"></view>
                </view>
                <view class="fs-28 fw-600 ml-10">{{ item.activity_info.publisher_nickname }}
                </view>
              </view>
              <view class="fs-24 col-b1">{{ $timeFormat(item.notice_time) }}</view>
            </view>
            <view @click="navigateToActivityNoticeDetail(item)" class="pos-rela activity-message-image">
              <image :src="item.activity_info.imgs[0].src" mode="aspectFill"
                     class="activity-message-image"/>
              <view
                  class="col-f fw-600 fs-32 pos-abso ping-20 w-100 activity-message-title text-element-1">
                {{ item.activity_info.name }}
              </view>
            </view>
            <view @click="navigateToActivityNoticeDetail(item)" class="fs-30 fw-600 ping-20 text-element-2">
              {{ item.notice_title }}
            </view>
          </view>
          <qmy-logo></qmy-logo>
        </view>
      </view>
    </view>

    <!-- 系统通知 -->
    <view v-else-if="noticeType === 2">
      <!-- 如果消息列表为空 -->
      <view v-if="systemNoticeList.length === 0" class="message-empty-box">
        <image class="message-empty-image"
               src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/message-empty.png"
               mode="scaleToFill"/>
        <view class="fs-28 fw-600">暂无消息</view>
      </view>
      <view v-else class="w-100 ping-30">
        <view class="bac-col-f br-20 ping-20 mb-30" v-for="(item,index) in systemNoticeList" :key="index">
          <view class="flex-dir-row flex-x-bet ali-item-cen">
            <view class="flex-dir-row ali-item-cen">
              <view class="border-f0 ping-10 br-200 pos-rela" style="width: 80rpx;height: 80rpx;">
                <image class="flex-shrink-0 br-200" style="width: 60rpx; height: 60rpx;"
                       src="../../../static/logo.png"/>
                <view v-if="item.user_read_status == 0"
                      style="height: 15rpx;width: 15rpx;top: 0;right: 0;"
                      class="br-200 bac-col-ff0 pos-abso"></view>
              </view>
              <view class="fs-32 fw-600 ml-20">{{ item.system_notice_type }}</view>
            </view>
            <view class="fs-26 col-87">{{ $timeFormat(item.notice_time) }}</view>
          </view>
          <view class="mt-20 bor-top-f3 pt-20">
            <view class="fw-600 fs-32">{{ item.notice_title }}</view>
            <view class="fs-28 mt-20">{{ item.notice_content }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 私信 -->
    <view v-else-if="noticeType === 3">
      <ChatListComponent
          :isVisible="noticeType === 3"
          @unreadCountChange="handlePrivateUnreadCountChange"
          ref="chatListComponent"
      />
    </view>
  </view>
</template>

<script>
import {
  store,
  mutations
} from '@/utils/store.js'
import ChatListComponent from '@/components/chat/ChatListComponent.vue'

export default {
  name: 'pageD',
  components: {
    ChatListComponent
  },
  props: {
    isVisible: {
      type: Boolean,
      required: false
    },
    refresh: {
      type: Boolean,
      required: false
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo; //用户信息
    },
  },
  data() {
    return {
      //顶部导航
      // #ifdef MP-WEIXIN
      menuObject: uni.getMenuButtonBoundingClientRect(),
      // #endif
      // #ifndef MP-WEIXIN
      menuObject: {
        statusBarHeight: uni.getSystemInfoSync().statusBarHeight || 0
      },
      // #endif
      // 通知类型 (默认显示私信)
      noticeType: 3,
      // 通知列表
      noticeList: [],
      // 活动通知列表
      activityNoticeList: [],
      // 系统通知列表
      systemNoticeList: [],
      dataLoaded: false, //数据是否加载完成
      activityNoticeCount: 0, //活动通知未读数量
      systemNoticeCount: 0, //系统通知未读数量
      isClickSystemNotice: false, //判断是否点击过系统通知
      totalNoticeCount: {
        circle: 0, // 圈子通知
        activity: 0, // 活动通知
        system: 0, // 系统通知
        private: 0, // 私信通知
      },
      circleNoticeCount: 0, //圈子通知未读数量
      // 私信相关 - 现在由ChatListComponent管理
      privateMessageCount: 0, //私信未读数量
    }
  },
  watch: {
    isVisible(val) {
      if (val && !this.dataLoaded) {
        // 使用模拟数据
        this.initMockData();
      }
    },
    refresh(e) {
      if (e) {
        this.dataLoaded = false;
        this.totalNoticeCount.circle = 0;
        this.totalNoticeCount.activity = 0;
        this.totalNoticeCount.system = 0;
        this.totalNoticeCount.private = 0;
        this.$nextTick(() => {
          // 重新初始化模拟数据
          this.initMockData();
          // 刷新聊天列表
          this.refreshChatList();
        })
      }
    },
  },
  mounted() {
    // 使用模拟数据，在isVisible监听中初始化
  },
  methods: {
    // 初始化模拟数据
    initMockData() {
      // 模拟圈子通知列表
      this.noticeList = [
        {
          id: 'notice1',
          _id: 'notice1',
          user_id: 'user1',
          user_name: '户外达人小明',
          user_avatar: 'https://gd-hbimg.huaban.com/cab77d5cc2560dbff3f37786e016093cbb2f854a30bd7-Ncp3yA_fw1200webp',
          user_gender: 1,
          like_read_status: 0, // 未读
          type: 0, // 点赞类型
          article_id: 'article1',
          article_data: {
            id: 'article1',
            title: '春日登山记录，遇见最美的风景',
            thumbnail: ['https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp']
          },
          create_date: Date.now() - 3600000 // 1小时前
        },
        {
          id: 'notice2',
          _id: 'notice2',
          user_id: 'user2',
          user_name: '美食家小红',
          user_avatar: 'https://gd-hbimg.huaban.com/cab77d5cc2560dbff3f37786e016093cbb2f854a30bd7-Ncp3yA_fw1200webp',
          user_gender: 2,
          like_read_status: 0, // 未读
          comment_type: 0,
          article_id: 'article2',
          article_data: {
            id: 'article2',
            title: '自制红烧肉的秘密配方',
            thumbnail: ['https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp']
          },
          comment_content: '这个分享太棒了！学到了很多',
          create_date: Date.now() - 7200000 // 2小时前
        }
      ];

      // 模拟活动通知列表
      this.activityNoticeList = [
        {
          id: 'activity1',
          notice_title: '您报名的户外徒步活动即将开始，请准时参加！',
          notice_time: Date.now() - 1800000, // 30分钟前
          user_read_status_array: [], // 未读
          activity_info: {
            user_id: 'organizer1',
            name: '春季户外徒步活动',
            publisher_nickname: '户外组织者',
            publisher_avatar: 'https://gd-hbimg.huaban.com/cab77d5cc2560dbff3f37786e016093cbb2f854a30bd7-Ncp3yA_fw1200webp',
            publisher_gender: 1,
            imgs: [{
              src: 'https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp'
            }]
          }
        },
        {
          id: 'activity2',
          notice_title: '新的摄影活动等你参与，一起记录美好时光',
          notice_time: Date.now() - 3600000, // 1小时前
          user_read_status_array: [], // 未读
          activity_info: {
            user_id: 'organizer2',
            name: '城市夜景摄影活动',
            publisher_nickname: '摄影师小王',
            publisher_avatar: 'https://gd-hbimg.huaban.com/cab77d5cc2560dbff3f37786e016093cbb2f854a30bd7-Ncp3yA_fw1200webp',
            publisher_gender: 2,
            imgs: [{
              src: 'https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp'
            }]
          }
        }
      ];

      // 模拟系统通知列表
      this.systemNoticeList = [
        {
          id: 'system1',
          system_notice_type: '系统更新',
          notice_title: '应用版本更新通知',
          notice_content: '新版本V2.3.0已发布，包含性能优化、新增聊天功能和bug修复，建议及时更新体验新功能。',
          notice_time: Date.now() - 3600000, // 1小时前
          user_read_status: 0 // 未读
        },
        {
          id: 'system2',
          system_notice_type: '活动公告',
          notice_title: '春季活动月正式启动',
          notice_content: '为期一个月的春季活动正式开始，参与活动可获得丰厚奖励，包括积分、优惠券等福利。',
          notice_time: Date.now() - 7200000, // 2小时前
          user_read_status: 0 // 未读
        }
      ];

      // 私信列表现在由ChatListComponent管理，不需要模拟数据

      // 统计未读消息数量
      this.circleNoticeCount = this.noticeList.filter(item => item.like_read_status == 0).length;
      this.activityNoticeCount = this.activityNoticeList.filter(item => !item.user_read_status_array.includes('currentUser')).length;
      this.systemNoticeCount = this.systemNoticeList.filter(item => item.user_read_status == 0).length;
      // 私信未读数由ChatListComponent管理，初始为0
      this.privateMessageCount = 0;

      // 更新总计数
      this.totalNoticeCount.circle = this.circleNoticeCount;
      this.totalNoticeCount.activity = this.activityNoticeCount;
      this.totalNoticeCount.system = this.systemNoticeCount;
      this.totalNoticeCount.private = this.privateMessageCount;

      this.$emit('messageChange', this.totalNoticeCount);
      this.dataLoaded = true;
      this.$emit('refreshState', false);
    },

    // 通知类型切换
    noticeTypeClick(val) {
      this.noticeType = val;
      switch (val) {
        case 0:
          // 圈子消息 - 标记为已读
          this.updateCircleNoticeReadStatus();
          break;
        case 1:
          // 活动通知 - 标记为已读
          this.activityNoticeList.forEach(item => {
            if (!item.user_read_status_array.includes('currentUser')) {
              item.user_read_status_array.push('currentUser');
            }
          });
          this.activityNoticeCount = 0;
          this.totalNoticeCount.activity = 0;
          break;
        case 2:
          // 系统通知 - 只有第一次点击时更新
          if (!this.isClickSystemNotice) {
            this.updateSystemNoticeReadStatus();
          }
          break;
        case 3:
          // 私信页面 - 私信未读数由ChatListComponent管理
          // 这里不需要处理，因为组件会自动处理未读状态
          break;
      }
      this.$emit('messageChange', this.totalNoticeCount);
    },

    // 更新所有系统通知为已读状态
    updateSystemNoticeReadStatus() {
      this.isClickSystemNotice = true; // 标记已点击过系统通知
      // 使用模拟数据，直接更新本地状态
      this.systemNoticeList.forEach(item => {
        item.user_read_status = 1; // 设为已读
      });
      this.systemNoticeCount = 0;
      this.totalNoticeCount.system = 0;
      this.$emit('messageChange', this.totalNoticeCount);
    },

    // 更新圈子通知为已读状态
    updateCircleNoticeReadStatus() {
      // 使用模拟数据，直接更新本地状态
      this.noticeList.forEach(item => {
        item.like_read_status = 1; // 设为已读
      });
      this.circleNoticeCount = 0;
      this.totalNoticeCount.circle = 0;
      this.$emit('messageChange', this.totalNoticeCount);
    },

    // 跳转活动消息详情时监听
    navigateToActivityNoticeDetail(item) {
      const that = this;
      uni.navigateTo({
        url: `/pages/detail/messageDetail?data=${encodeURIComponent(JSON.stringify(item))}`,
        events: {
          refresh: function (data) {
            that.getActivityNoticeList();
          }
        }
      })
    },

    // 处理私信未读数变化
    handlePrivateUnreadCountChange(unreadCount) {
      this.privateMessageCount = unreadCount
      this.totalNoticeCount.private = unreadCount
      this.$emit('messageChange', this.totalNoticeCount)
    },

    // 刷新聊天列表
    refreshChatList() {
      if (this.$refs.chatListComponent) {
        this.$refs.chatListComponent.refresh()
      }
    }
  }
}
</script>

<style lang="scss">
.centered {
  left: 50%;
  transform: translate(-50%, 0%);
}

.num-box {
  font-size: 20rpx;
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  border-radius: 50%;
  background-color: #fd3613f2;
  color: #ffffff;
  position: absolute;
  right: -6rpx;
  top: -6rpx;
}

// 消息通知样式

.wh-90 {
  width: 90rpx;
  height: 90rpx;
}

.line-box {
  width: 4rpx;
  background: #dcdcdc;
}

.text-box {
  padding: 7rpx 0;
}

.activity-box {
  width: 110rpx;
  height: 110rpx;
  background: #ebfdea;
}

.circle-box {
  width: 110rpx;
  height: 110rpx;
  background: #eafbfd;
}

.system-box {
  width: 110rpx;
  height: 110rpx;
  background: #fff9ea;
}

.private-box {
  width: 110rpx;
  height: 110rpx;
  background: #ffeaf5;
}

// 活动消息样式
.message-empty-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.message-empty-image {
  width: 200rpx;
  height: 200rpx;
}

.activity-message-avatar {
  width: 65rpx;
  height: 65rpx;
  border-radius: 50%;
}

.activity-message-image {
  width: 100%;
  height: 300rpx;
}

.activity-message-title {
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

// App端导航栏样式
.app-header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 2;
  background: #14cc60; /* 使用项目主色调 */
  box-shadow: 0 2rpx 8rpx rgba(20, 204, 96, 0.2); /* 使用主色调的阴影 */
  transition: all 0.3s ease; /* 添加过渡效果 */
}

.status-bar {
  width: 100%;
  background: transparent;
}

.app-header-content {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 30rpx; /* 左右内边距 */
}

.app-header-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  line-height: 1;
}
</style>
